<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">


    <title>标签列表</title>
    <meta content="" name="keywords">
    <meta content="" name="description">

    <link href="favicon.ico" rel="shortcut icon">
    <link href="/static/hAdmin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/hAdmin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="/static/hAdmin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="/static/hAdmin/css/animate.css" rel="stylesheet">
    <!--<link href="/static/hAdmin/css/style.css?v=4.1.0" rel="stylesheet">-->
    <link href="/static/hAdmin/css/style3.css?v4.0" rel="stylesheet">
    <link href="/static/hAdmin/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <style>
        .addList {
             padding: 10px 30px 10px 30px;
             height: 90px;
             margin-top: 3px;}


         .heart-icon {
             font-size: 14px;
             /*color: #007BFF;*/
             cursor: pointer;
             /*margin-right: 10px;*/
             transition: transform 0.5s ease; /* 添加过渡效果 */
        }
        .heart-icon:hover {
            transform: rotate(360deg); /* 旋转 360 度 */
        }
    </style>

</head>

<body class="gray-bg">
<div id="block"
     style="width: 100%;height: 100%;background: #171717;opacity: 0.7;position: fixed;top: 0;left: 0;z-index: 999;text-align: center;display: none">
    <div style="margin-top: 300px">
        <span style="color: #ffffff;font-size: 20px;font-weight: 700">正在提交本次操作，请勿进行任何操作......</span>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInUp">
    <span id="gloUrl" style="display: none"></span>

    <div class="row">
        <div class="col-sm-12">

            <div class="ibox">
                <div class="ibox-title" style="height: 55px;">
                    <h5>所有记录</h5>
                    <div class="ibox-tools">
                        <div class="text-center">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                                添加标签
                            </button>
                        </div>

                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row m-b-sm m-t-sm">
                        <div class="col-md-1">
                            <button class="btn btn-white btn-sm" id="loading-example-btn" type="button"><i
                                    class="fa fa-refresh"></i>
                                刷新
                            </button>
                        </div>
                        <div class="col-md-11 form-inline">
                            <div class="input-group col-xs-5">
                                <input class="input-sm form-control" id="searchKey" placeholder="请根据 标签名 进行关键词匹配"
                                       type="text">
                            </div>
                            <div class="input-group">
                                <select class="form-control" id="status" value="3">
                                    <option class="form-control" value="">全部</option>
                                    <option class="form-control" value="1">正常</option>
                                    <option class="form-control" value="0">停用</option>
                                </select>

                            </div>
                            <div class="input-group">
                                <button class="btn btn-sm btn-primary" id="getByKeywords"
                                        type="button">搜索
                                </button>
                            </div>
                        </div>
                    </div>
                    <!--            列表          -->
                    <div class="project-list">
                        <table class="table table-hover">
                            <tbody id="listBody"></tbody>
                        </table>
                    </div>
                    <!--                        页码控制-->
                    <div ajaxUrl="www.baidu.com" currentPage="1" id="pageHelper">
                        <div class="pageBottom col-xs-10 col-xs-offset-1" style="margin-top: 20px">
                            <nav aria-label="...">
                                <ul class="pager">
                                    <li class="previous disabled"><a href="javascript:void(0)"><span aria-hidden="true">&larr;</span>
                                        Older</a></li>
                                    <li>
                                        <span>共</span>
                                        <span id="data_total">${total}</span>
                                        <span>条数据</span>
                                    </li>
                                    <li class="next"><a href="javascript:void(0)">Newer <span
                                            aria-hidden="true">&rarr;</span></a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!--弹出框-->
<div aria-hidden="true" class="modal inmodal" id="myModal" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight" style="min-height: 300px;overflow-y: scroll">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">关闭</span>
                </button>
                <i class="fa fa-users modal-icon" style="font-size: 60px"></i>
                <h4 class="modal-title">新增标签</h4>

            </div>

            <div align="center" class="formListAdd">

                <div class="modal-body addList">
                    <div class="form-group col-xs-12">
                        <label for="typeNameAdd">标签名</label>
                        <input class="form-control" id="typeNameAdd" placeholder="请输入标签名" type="text">
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-white" data-dismiss="modal" type="button">关闭</button>
                    <button class="btn btn-success" data-dismiss="modal" id="confirmAdd" type="button">添加</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--弹出框-->
<div aria-hidden="true" class="modal inmodal" id="myModalEdit" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight" style="min-height: 300px;overflow-y: scroll">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">关闭</span>
                </button>
                <i class="fa fa-users modal-icon" style="font-size: 60px"></i>
                <h4 class="modal-title">编辑标签</h4>

            </div>

            <div align="center" class="formListAdd">

                <div class="modal-body addList">
                    <div class="form-group col-xs-12">
                        <label for="typeNameEdit">标签名</label>
                        <input class="form-control" id="typeNameEdit" placeholder="请输入标签名" type="text">
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-white" data-dismiss="modal" type="button">关闭</button>
                    <button class="btn btn-success" data-dismiss="modal" id="confirmEdit" type="button">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="/static/hAdmin/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/hAdmin/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Sweet alert -->
<script src="/static/hAdmin/js/plugins/sweetalert/sweetalert.min.js"></script>

<!-- 自定义js -->
<script src="/static/hAdmin/js/content.js?v=1.0.0"></script>
<!--    分页js -->
<!--<script src="/static/wmmJs/public/PageHelper.js"></script>-->
<script src="/static/hAdmin/js/plugins/toastr/toastr.min.js"></script>
<script src="/static/js/GloJs.js"></script>
<script>


    $(function () {

        let Glo_BaseUrl = $("#gloUrl").attr("gloUValue")
        let Glo_user = localStorage.getItem("userId")
        let currentPage = $("#pageHelper").attr("currentPage");

        function getTypeList(num) {
            let total = 0;//总数
            let pageSize = 6;//每页条数
            let html_dom = $("#listBody")

            let searchKey = $("#searchKey").val()
            if (num === 1) {
                searchKey = ""
                $("#searchKey").val("")
            }

            setTimeout(function () {
                $.ajax({
                    url: Glo_BaseUrl + "/tType/list",
                    type: "get",
                    data: {
                        "pageSize": pageSize,
                        "pageNum": currentPage,
                        "typeName": searchKey,
                        "status": $("#status").val(),
                    },
                    success: function (data) {

                        let ListStr = ''
                        total = data.total

                        for (let i = 0; i < data.list.length; i++) {
                            let specialStatus = ''
                            let specialButton = ` <a href="javascript:void(0)" class="btn btn-danger btn-sm toDelete adminFun" title="停用" id="toDelete_${data.list[i].id}" "><i class="fa fa-close"></i>  </a>`
                            let colorStr = `<tr>`

                            if (data.list[i].status === "1") {
                                specialStatus = ' <span class="label label-info">正常</span>'

                            } else {
                                specialStatus = ` <span class="label label-danger">已停用</span>`
                                colorStr = `<tr style="color: #c2c2c2">`
                                specialButton = ` <a href="javascript:void(0)" class="btn btn-success btn-sm toUnDelete adminFun" title="恢复" id="toUnDelete_${data.list[i].id}" "><i class="fa fa-clock-o"></i>  </a>`

                            }
                            ListStr +=
                                colorStr + `
                                        <td class="project-status">` + specialStatus +
                                `
                                        </td>
                                        <td class="project-title">
                                            <span > <strong>${data.list[i].typeName}</strong> </span>
                                            <br/>
                                              <small>最近更新日期：<span id="EventTime">${data.list[i].updateTime}</span> </small>
                                        </td>
<td class="project-completion">
                                                <small>创建时间：<span id="dataForClass">${data.list[i].createTime}</span> </small>
                </td>
                                        <td class="project-completion">
                                                <small>使用次数：<span id="dataForClass">${data.list[i].useNum}</span> </small>

                </td>

                <td class="project-actions">
                <span style="display: none" id="idOfEquipment"></span>
                <button  class="btn btn-warning btn-sm editType" title="编辑" data-toggle="modal"
                data-target="#myModalEdit" id="editType"
                thisId="${data.list[i].id}"
                thistypeName="${data.list[i].typeName}"

                >
                <i class="fa fa-heart heart-icon"></i> </button>
                ` + specialButton +
                                `

                                 </td>
                </tr>
                `

                        }

                        if (data.code !== 500) {
                            html_dom.html("")
                            html_dom.append(ListStr)
                        } else {
                            alert("获取失败")
                        }

                        total = data.total
                        $("#data_total").html(data.total);
                        //下一页
                        $('.next').unbind().click(function () {
                            if (currentPage * pageSize >= total) {
                                toastr.error("已经是最后一页了！", '标签')
                            } else {
                                currentPage++;
                                $("#pageHelper").attr("currentPage", currentPage);
                                if (currentPage > 0) {
                                    $(".previous").removeClass("disabled")
                                }
                                $(".project-list").addClass("animated bounceOutLeft")
                                setTimeout(function () {
                                    $(".project-list").removeClass("animated bounceOutLeft").addClass("animated bounceInRight")
                                }, 500)
                                getTypeList(2)
                            }

                        });
                        //上一页
                        $('.previous').unbind().click(function () {
                            currentPage--;
                            $("#pageHelper").attr("currentPage", currentPage);
                            if (currentPage === 0) {
                                currentPage = 1;
                                $("#pageHelper").attr("currentPage", currentPage);
                                $(".previous").addClass("disabled");
                            } else {
                                $(".project-list").addClass("animated bounceOutRight")
                                setTimeout(function () {
                                    $(".project-list").removeClass("animated bounceOutRight bounceInRight").addClass("animated bounceInLeft")
                                }, 500)
                                getTypeList(2)
                            }
                        });
                        //查看详情
                        $(".seeRentDetail").unbind().click(function () {
                            localStorage.setItem("id", $(this).attr("rentId"));

                        });
                        //停用
                        $(".toDelete").unbind().click(function () {

                            let id = $(this).attr("id").split("toDelete_")[1]
                            swal({
                                title: "您确定要停用该标签信息吗",
                                text: "停用后可恢复！",
                                type: "warning",
                                showCancelButton: true,
                                confirmButtonColor: "#2294AA",
                                confirmButtonText: "停用",
                                closeOnConfirm: false
                            }, function () {
                                $.ajax({
                                    url: Glo_BaseUrl + "/tType/edit",
                                    type: "post",
                                    data: {
                                        id: id,
                                        status:"0"
                                    },
                                    success: function (data) {

                                        swal(data.msg, "", "success");
                                        getTypeList(2)
                                    },
                                    error: function () {
                                        alert("服务器异常！network error！")
                                    }
                                })

                            });

                        });
                        //恢复
                        $(".toUnDelete").unbind().click(function () {

                           let id = $(this).attr("id").split("toUnDelete_")[1]

                                $.ajax({
                                    url: Glo_BaseUrl + "/tType/edit",
                                    type: "post",
                                    data: {
                                        id: id,
                                        status:"1"
                                    },
                                    success: function (data) {

                                        swal(data.msg, "", "success");
                                        getTypeList(2)
                                    },
                                    error: function () {
                                        alert("服务器异常！network error！")
                                    }
                                })


                        });
                        //准备编辑
                        $(".editType").unbind().click(function () {
                            let id = $(this).attr("thisId")
                            let thistypeName = $(this).attr("thistypeName")
                            $("#typeNameEdit").val(thistypeName)
                            localStorage.setItem("id", id)
                        })
                        //编辑
                        $("#confirmEdit").unbind().click(function () {
                            let id = localStorage.getItem("id")
                            $.ajax({
                                url: Glo_BaseUrl + "/tType/edit",
                                type: "post",
                                data: {
                                    id: id,
                                    typeName: $("#typeNameEdit").val()
                                },
                                success: function (data) {
                                    if (data.code === 200) {
                                        swal(data.msg, "", "success");
                                    } else {
                                        swal(data.msg, "", "error");
                                    }
                                    getTypeList(2)
                                },
                                error: function () {
                                    alert("服务器异常！network error！")
                                }
                            })
                        })
                    },
                    error: function () {
                        alert("服务器异常！network error！")
                    }
                });
            }, 300)


        }


        //*******************************************
        getTypeList(2)
        $("#getByKeywords").click(function () {
            getTypeList(2)
        })
        $(".loading-example-btn").click(function () {
            getTypeList(1)
        })

        // beginPage()
        function simpleLoad(btn, state) {
            if (state) {
                btn.children().addClass('fa-spin');
                btn.contents().last().replaceWith(" Loading");
            } else {
                setTimeout(function () {
                    btn.children().removeClass('fa-spin');
                    btn.contents().last().replaceWith(" Refresh");
                }, 2000);
            }
        }

        $(document).ready(function () {
            $('#loading-example-btn').click(function () {
                btn = $(this);
                simpleLoad(btn, true)
                simpleLoad(btn, false)
                getTypeList(1)
            });
        });


//-----------------------------
        //添加标签
        $("#confirmAdd").click(function () {
            var formData = new FormData();//这里需要实例化一个FormData来进行文件上传

            formData.append("typeName", $("#typeNameAdd").val());


            $.ajax({
                url: Glo_BaseUrl + "/tType/add",
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    toastr.success(data.msg, '提示')
                    toastr.options = {
                        "closeButton": true,
                        "debug": false,
                        "progressBar": true,
                        "positionClass": "toast-top-right",
                        "onclick": null,
                        "showDuration": "400",
                        "hideDuration": "1000",
                        "timeOut": "7000",
                        "extendedTimeOut": "1000",
                        "showEasing": "swing",
                        "hideEasing": "linear",
                        "showMethod": "fadeIn",
                        "hideMethod": "fadeOut"
                    }
                    getTypeList(1)
                },
                error: function () {
                    alert("服务器异常！network error！")
                }
            })
        })

    })
</script>
</body>
</html>
